<template>
    <!-- 初始化地图，设置中心 zoom缩放变量-->
    <!-- center定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度 -->
  <div class="tou">
    <van-nav-bar
        title="地图找房"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <van-loading color="#1989fa" v-if="isShow"/>
    <MapHouse
    @cliclabel="newlabel"
    @clichuiwei="huiwei"
    :list="list"
    :where="where"
    :zoom='zoom'
    :postion="postion"
    ></MapHouse>
  </div>
</template>
<script>
import MapHouse from '@/components/MapHouse'
import { getmapxy, getcitybdID } from '@/api/citydata'
import { getCityToken } from '@/utils/storage'
export default {
  components: {
    MapHouse
  },
  data () {
    // 先根据本地地名设置地图中心
    return {
      where: getCityToken(),
      zoom: 12,
      list: [],
      isShow: true,
      postion: []
    }
  },
  // 在根据本地code获取一级房源信息,并处理数据将其遍历
  async created () {
    this.isShow = true
    const { body } = await getmapxy(getcitybdID())
    this.list = body
    this.isShow = false
    this.postion = body.map(item => ({ lng: item.coord.longitude, lat: item.coord.latitude }))
  },
  methods: {
    async newlabel (value, sizexy) {
      this.isShow = true
      console.log(value)
      const { body } = await getmapxy(value)
      console.log(body)
      this.where = sizexy
      this.zoom++
      this.list = body
      this.isShow = false
      this.postion = body.map(item => ({ lng: item.coord.longitude, lat: item.coord.latitude }))
    },
    async huiwei () {
      this.isShow = true
      const { body } = await getmapxy(getcitybdID())
      console.log(body)
      this.list = body
      this.where = getCityToken()
      this.isShow = false
    }
  }
}
</script>
<style lang="less" scoped>

.tou{
  /deep/.van-nav-bar__content{
    position: fixed;
    width: 100vw;
    background-color: #21b97a;
    left: 0;

  }
}
.van-loading{
  position: fixed;
  width: 300px !important;
  bottom: 50%;
  left: 40%;
  z-index:999;
}
.van-loading__spinner.van-loading__spinner--circular{
  width: 100px;
  height: 100px;
}
</style>
